<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>PDBe Molstar Component Demo</title>

    <!-- Required for IE11 -->
    <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
    <!-- Web component polyfill (only loads what it needs) -->
    <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
        charset="utf-8"></script>
    <!-- Required to polyfill modern browsers as code is ES5 for IE... -->
    <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
        charset="utf-8"></script>

    <link rel="stylesheet" type="text/css" href="build/pdbe-molstar.css">
    <script type="text/javascript" src="build/pdbe-molstar-component.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .msp-plugin ::-webkit-scrollbar-thumb {
            background-color: #474748 !important;
        }

        body {
            padding: 30px;
        }

        h2 {
            margin-bottom: 20px;
        }
        h3 {
            margin-bottom: 2px;
        }
        h4 {
            margin-top: 6px;
            margin-bottom: 2px;
        }
        h4:first-child {
            margin-top: 0px;
        }

        .content {
            display: flex;
            flex-wrap: wrap-reverse;
            gap: 30px;
        }

        .controlsSection {
            width: 300px;
        }

        .controlBox {
            border: 1px solid lightgray;
            padding: 10px;
            margin-bottom: 20px;
        }

        #myViewer {
            width: 450px;
            height: 450px;
            position: relative;
        }

        button {
            margin-right: 8px;
            margin-bottom: 8px;
            padding: 1px;
            padding-inline: 4px;
        }
        button:last-child {
            margin-bottom: 0px;
        }
    </style>
</head>

<body>
    <h2>PDBe Molstar Component</h2>

    <div class="content">
        <div class="controlsSection">
            <h3>Canvas/ layout methods</h3>
            <div class="controlBox">
                <h4>Set Background</h4>
                <button onclick="viewerInstance.canvas.setBgColor('white')">White</button>
                <button onclick="viewerInstance.canvas.setBgColor('black')">Black</button>

                <h4>Toggle controls menu</h4>
                <button onclick="viewerInstance.canvas.toggleControls(false)">Hide</button>
                <button onclick="viewerInstance.canvas.toggleControls(true)">Show</button>
                <button onclick="viewerInstance.canvas.toggleControls()">Toggle</button>

                <h4>Toggle Fullscreen</h4>
                <button onclick="viewerInstance.canvas.toggleExpanded(true)">Show Fullscreen</button>
            </div>

            <h3>Visual Methods</h3>
            <div class="controlBox">
                <h4>Change representation visibility</h4>
                <button onclick="viewerInstance.visual.visibility({ water: false })">Hide Water Visual</button>
                <button onclick="viewerInstance.visual.visibility({ water: true })">Show Water Visual</button>

                <h4>Toggle Spin</h4>
                <button onclick="viewerInstance.visual.toggleSpin(true)">Rotate</button>
                <button onclick="viewerInstance.visual.toggleSpin(false)">Stop</button>
                <button onclick="viewerInstance.visual.toggleSpin()">Toggle</button>

                <h4>Focus</h4>
                <button onclick="viewerInstance.visual.focus([{ struct_asym_id: 'A', start_residue_number: 14, end_residue_number: 18 }])">
                    Focus on Chain A:14-18
                </button>

                <h4>Highlight</h4>
                <button onclick="viewerInstance.visual.highlight({ data: [{ struct_asym_id: 'A', start_residue_number: 14, end_residue_number: 18 }], color: '#ffff00' })">
                    Highlight Chain A:14-18
                </button>
                <button onclick="viewerInstance.visual.clearHighlight()">
                    Clear Highlight
                </button>
                
                <h4>Selection</h4>
                <button onclick="viewerInstance.visual.select({ data: [{ struct_asym_id: 'A', color: '#ffff00', focus: true }] })">
                    Select & Focus on Chain A
                </button>
                <br>
                <button onclick="viewerInstance.visual.select({ data: [{ struct_asym_id: 'B', color: '#ffff00', focus: true }]})">
                    Select & Focus on Chain B
                </button>
                <br>
                <button onclick="viewerInstance.visual.select({ data: [{ struct_asym_id: 'B', start_residue_number: 1, end_residue_number: 6, color: '#ffff00' }]})">
                    Select Chain B:1-6
                </button>
                <br>
                <button onclick="viewerInstance.visual.select({ data: [
                    { struct_asym_id: 'B', start_residue_number: 1, end_residue_number: 6, color: '#ffff00' },
                    { struct_asym_id: 'B', start_residue_number: 15, end_residue_number: 20, color: '#88ff00' }]})">
                    Select Chain B:1-6, B:15-20
                </button>
                <br>
                <button onclick="viewerInstance.visual.select({ data: [{ uniprot_accession: 'P02070', start_uniprot_residue_number: 122, end_uniprot_residue_number: 142, color: '#ff00ff' }], nonSelectedColor: '#ffffff' })">
                    Select Uniprot
                </button>
                <br>
                <button onclick="viewerInstance.visual.clearSelection()">
                    Clear Selection
                </button>

                <h4>Set highlight / selection colour</h4>
                <button onclick="viewerInstance.visual.setColor({ highlight: '#ffff00' })">
                    Yellow highlight
                </button>
                <button onclick="viewerInstance.visual.reset({ highlightColor: true })">
                    Reset
                </button>
                <br>
                <button onclick="viewerInstance.visual.setColor({ select: '#ff0000' })">
                    Red selection
                </button>
                <button onclick="viewerInstance.visual.reset({ selectColor: true })">
                    Reset
                </button>

                <h4>Reset Visual</h4>
                <button onclick="viewerInstance.visual.reset({ camera: true })">
                    Camera
                </button>
                <button onclick="viewerInstance.visual.reset({ theme: true })">
                    Theme
                </button>
                <button onclick="viewerInstance.visual.reset({ camera: true, theme: true })">
                    Camera & Theme
                </button>

                <h4>Update data</h4>
                <button onclick="viewerInstance.visual.update({ moleculeId: '1cbs' }, false)">
                    Update (add)
                </button>
                <button onclick="viewerInstance.visual.update({ moleculeId: '1cbs' }, true)">
                    Update (replace)
                </button>
            </div>
        </div>

        <div class="viewerSection">
            <h3>PDBe Mol* Web-component Demo</h3>
            <!-- Molstar container -->
            <div id="myViewer">
                <pdbe-molstar id="pdbeMolstarComponent"
                    molecule-id="1hda" assembly-id="1"
                    default-preset="default"
                    alphafold-view="false"

                    hide-water="true" hide-het="false" hide-non-standard="false"
                    load-maps="true"
                    bg-color-b="20" bg-color-r="15" bg-color-g="0"
                    highlight-color-g="255" highlight-color-b="0"
                    select-color-g="255" select-color-b="0"
                    lighting="glossy"

                    domain-annotation validation-annotation symmetry-annotation
                    pdbe-url="https://www.ebi.ac.uk/pdbe/" 
                    encoding="bcif"
                    low-precision
                    subscribe-events="false"

                    hide-controls="false"
                    sequence-panel="false"
                    pdbe-link
                    loading-overlay
                    expanded="false" landscape="false" reactive="false">
                </pdbe-molstar>
            </div>

        </div>
    </div>


    <script>
        var viewerInstance;
        window.onload = function () {
            const pdbeMolstarComponent = document.getElementById('pdbeMolstarComponent');
            viewerInstance = pdbeMolstarComponent.viewerInstance;
        };
    </script>
</body>

</html>